<template>
    <div class="cms-content-poster" :class="{ 'is-mobile': $isMobile }">

        <div class="firstDatas">
            <img :src="currentFirstData.poster" alt="" class="poster">

            <div class="content" @click=" handleDetail(currentFirstData)">
                <div class="title">{{ currentFirstData.title }}</div>
                <div class="txt" v-html="filterHtml(detail)"></div>
                <div class="time">{{ formatTime(currentFirstData.publishTime) }}</div>
            </div>
        </div>


        <div class="secondDatas">
            <div class="secondDatas-item " v-for="item in secondDatas" @click=" handleDetail(item)">
                <img :src="item.poster" alt="" class="poster">
                <div class="content">
                    <div class="title">{{ item.title }}</div>
                    <div class="time">{{ formatTime(item.publishTime) }}</div>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script>
export default {
    props: ["list"],

    data() {

        return {
            currentIndex: 0,
            detail: "",
        }
    },



    computed: {
        posterList() {
            return this.list.filter((item) => {
                return item.poster
            }).slice(0, 5)
        },

        firstDatas() {
            return this.posterList.slice(0, 1)
        },

        currentFirstData() {
            return this.firstDatas[this.currentIndex]
        },

        secondDatas() {
            return this.posterList.slice(1, 5)
        }


    },

    mounted() {
        this.fetchData(this.currentFirstData.articleId);
    },

    methods: {

        async fetchData(id) {
            const { data } = await this.$fetch.get(`/api/article/${id}`);
            this.detail = data.detail;
        },

        formatTime(time) {
            if (!time) {
                return "-";
            }
            const date = new Date(time);
            const year = date.getFullYear();
            const month = `0${date.getMonth() + 1}`.slice(-2); // 补零操作
            const day = `0${date.getDate()}`.slice(-2); // 补零操作

            return `${year}-${month}-${day}`;
        },

        filterHtml(html) {
            if (!html) {
                return "";
            }
            return html.replace(/<[^>]+>/g, "");
        },
        handleDetail(item) {
            if (item.link) {
                return window.open(item.link);
            }
            this.$router.push({
                path: `/article-detail/${item.articleId || item.id}`,
            });
        },
    },
};
</script>
  
<style lang="less" scoped>
.cms-content-poster {
    padding: 20px;
    display: flex;
    width: 100%;
    flex-wrap: wrap;

    .firstDatas {
        display: flex;
        flex-wrap: nowrap;
        cursor: pointer;

        .poster {
            width: 361px;
            height: 281px;
            object-fit: cover;
            margin-right: 20px;
        }

        .title {
            font-family: PingFangSC, PingFang SC;
            font-weight: bold;
            font-size: 18px;
            color: #333333;
            line-height: 25px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            margin-bottom: 10px;
        }

        .txt {
            height: 110px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 16px;
            color: #484848;
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 5;
            -webkit-box-orient: vertical;
        }

        .time {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 12px;
            color: #AEAEAE;
            line-height: 17px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            margin-top: 30px;
            

        }

    }


    .secondDatas {
        border-top: 1px solid #EFEFEF;
        display: flex;
        flex-wrap: wrap;
        margin-top: 23px;
        padding-top: 29px;
        gap: 20px;



        .secondDatas-item {
            width: calc(50% - 10px);
            display: flex;
            flex-wrap: nowrap;
            cursor: pointer;

            .poster {
                width: 124px;
                height: 108px;
                margin-right: 10px;
                object-fit: cover;

            }

            .title {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 16px;
                color: #484848;
                line-height: 22px;
                text-align: left;
                font-style: normal;
                text-transform: none;
                margin-bottom: 26px;
            }

            .time {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 12px;
                color: #AEAEAE;
                line-height: 17px;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }
        }

    }

}
</style>
  